<template>
	<div>
		<div class="container" v-loading="loading">
			<div class="content_box">
				<div class="title">
					<i>Invoice</i>
				</div>
				<div class="tip">非常感谢使用近多出行，愿贵公司繁荣发展。</div>
				<div class="info_title">
					<div>{{ infoData.earnCustomerName }}</div>
					<div class="info_title-time">
						账单生成日：
						<span>
							{{ infoData.createTime | formatTime(0) }}
						</span>
					</div>
				</div>
				<div class="info_content">
					<el-table
						:data="info.financeProceeds"
						border
						style="width: 100%"
						show-summary
						:summary-method="getSummaries">
						<el-table-column label="No." width="50" align="center">
							<template slot-scope="scope">
								<span>
									{{ ++scope.$index }}
								</span>
							</template>
						</el-table-column>
						<el-table-column label="车型" align="center">
							<template slot-scope="scope">
								{{ scope.row.modelName || '-' }}
							</template>
						</el-table-column>
						<el-table-column label="车牌号" align="center">
							<template slot-scope="scope">
								<span>{{ scope.row.carCode || '-' }}</span>
							</template>
						</el-table-column>
						<el-table-column
							label="使用期间"
							align="center"
							width="200px">
							<template slot-scope="scope">
								<span>
									{{ scope.row.startTime | formatTime(0) }}
									~
									{{ scope.row.endTime | formatTime(0) }}
								</span>
							</template>
						</el-table-column>
						<!-- <el-table-column label="使用日" align="center"> -->
						<!-- <template slot-scope="scope"> -->
						<!-- <span -->
						<!-- v-if=" -->
						<!-- scope.row.settleAccountsType !== '6' && -->
						<!-- scope.row.settleAccountsType !== '7' -->
						<!-- "> -->
						<!-- {{ scope.row.useDuration | getUseDuration }} -->
						<!-- </span> -->
						<!-- <span v-else>-</span> -->
						<!-- </template> -->
						<!-- </el-table-column> -->
						<!--  -->
						<el-table-column
							label="项目"
							align="center"
							width="150px">
							<template slot-scope="scope">
								<span>
									{{ scope.row.proceedsTypeStr || '-' }}
								</span>
							</template>
						</el-table-column>
						<el-table-column
							label="金额"
							align="center"
							width="150">
							<template slot-scope="scope">
								<span>
									{{
										format_thousand(
											scope.row.receivableAmount,
										) || '-'
									}}
								</span>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<div class="info_foot">
					<div class="item" v-for="item in infoFoot">
						<div class="label">
							{{ item.label }}
						</div>
						<div class="content">{{ item.content }}</div>
					</div>
				</div>
				<div class="foot">{{ companyName }}</div>
			</div>
		</div>
		<div class="back">
			<el-button @click="back">返回</el-button>
		</div>
	</div>
</template>
<script>
	import * as apis from '@/api/finance/manage/settleDetail/api.js';
	export default {
		name: 'SettleDetail',
		components: {},
		mixins: [],
		props: {},
		data() {
			return {
				loading: false,
				info: {
					financeSettleAccounts: {},
					financeProceeds: [],
					sysDept: [],
				},
				infoFoot: [
					{
						label: '银行：',
						content: '',
					},
					{
						label: '账号：',
						content: '',
					},
					{
						label: '公司：',
						content: '',
					},
					{
						label: '地址：',
						content: '',
					},
					{
						label: '担当：',
						content: '',
					},
				],
			};
		},
		computed: {
			settleId() {
				return this.$route.query?.settleId ?? '';
			},
			infoData() {
				return this.info?.financeSettleAccounts ?? {};
			},
			companyName() {
				return (
					this.info?.financeProceeds?.[0]?.carAppertainCompany ?? '-'
				);
			},
			applyUserName() {
				return this.info?.financeProceeds?.[0]?.applyUserName ?? '-';
			},
		},
		watch: {},
		mounted() {
			this.getList();
		},
		filters: {
			getUseDuration(data) {
				let word = '-';
				switch (data) {
					case '1':
						word = '一个月';
						break;
					default:
						break;
				}
				return word;
			},
		},
		methods: {
			getList() {
				if (!this.settleId) return;
				this.loading = true;
				apis?.Info(this.settleId)
					.then(res => {
						if (res.code == 200) {
							this.info = res.data;
							this.infoFoot = [
								{
									label: '银行：',
									content: this.info?.sysDept?.openingBank,
								},
								{
									label: '账号：',
									content: this.info?.sysDept?.account,
								},
								{
									label: '公司：',
									content: this.companyName,
								},
								{
									label: '地址：',
									content: this.info?.sysDept?.mailingAddress,
								},
								{
									label: '担当：',
									content: this?.applyUserName,
								},
							];
						}
					})
					.catch(err => {})
					.finally(() => {
						this.loading = false;
					});
			},
			getSummaries({ columns, data }) {
				let sum = [];
				let price = 0;
				columns.forEach((element, index) => {
					if (index == 0) {
						element.colSpan = columns.length - 1;
					}
				});
				data.map(item => {
					let itemPrice = item.receivableAmount * 1;
					if (Number.isFinite(itemPrice)) {
						// numberAdd
						price = this.numberAdd(price, itemPrice);
					}
				});
				sum.push('合计');
				sum.push(this.format_thousand(price));
				return sum;
			},
			back() {
				this.$tab.closeOpenPage(this.$route);
				this._toPage({ path: '/finance/settle' });
			},
		},
	};
</script>
<style lang="scss" scoped>
	.content_box {
		margin: 50px auto 0;
		width: 1100px;
		border: 1px solid #000;
		background-color: #fff;
		.title {
			padding: 20px 0;
			text-align: center;
			i {
				font-size: 18px;
				font-weight: bold;
				letter-spacing: 3px;
				border-bottom: 1px solid #000;
			}
		}
		.tip {
			text-align: center;
			font-size: 14px;
		}
		.info_title {
			padding: 15px;
			padding-bottom: 5px;
			display: flex;
			justify-content: space-between;
			.info_title-time {
				font-weight: bold;
			}
		}

		.info_foot {
			padding: 15px;
			display: flex;
			flex-direction: column;
			border-bottom: 1px solid #000;
			gap: 15px;
			.item {
				display: flex;
				flex-direction: row;
				align-items: center;
				font-size: 14px;
				.label {
					padding-right: 10px;
					margin-right: 15px;
					vertical-align: middle;
					color: #606266;
					font-weight: 700;
				}
				.content {
					font-weight: 500;
					line-height: normal;
					color: #333;
				}
			}
		}
		.foot {
			text-align: center;
			padding: 20px 0;
			font-size: 14px;
		}
	}

	::v-deep .el-table__cell {
		background-color: #fff !important;
	}
	::v-deep .el-table .el-table__header-wrapper th,
	.el-table .el-table__fixed-header-wrapper th {
		background-color: #fff;
	}
	::v-deep .el-table th.el-table__cell.is-leaf,
	.el-table td.el-table__cell {
		border-color: #000;
	}
	::v-deep .el-table--border .el-table__cell {
		border-color: #000;
	}
	::v-deep .el-table--border {
		border-color: #000;
		border-bottom: 1px solid #000;
		border-left: none;
		border-right: none;
		.td.el-table__cell:last-child {
			border-right: none;
		}
	}
	div:empty::before {
		content: '-';
		display: block;
	}
	.back {
		margin: 20px;
		background: #fff;
		padding: 15px 20px;
		display: flex;
		justify-content: flex-end;
	}
	::v-deep .el-table__row .el-table__cell:last-child {
		border-right: none;
	}
</style>
